@import 'tailwindcss';
@plugin 'tailwind-scrollbar';

@utility scrollbar-hidden {
  -ms-overflow-style: none;
  scrollbar-width: none;
  &::-webkit-scrollbar {
    display: none;
  }
}
@utility animation-delay-* {
  animation-delay: --value([*]);
}

@theme {
  --animate-rotate: rotate 10s linear infinite paused;
  --animate-ripple2: ripple 2s linear 1s infinite paused;
  --animate-ripple: ripple 2s linear infinite paused;
  --animate-enterActive: enterActive 2s;
  --animate-width_decreases: width_decreases 3s linear infinite alternate;

  @keyframes ripple {
    0% {
      transform: scale(1);
      opacity: 0;
    }

    25% {
      transform: scale(1.25);
      opacity: 0.1;
    }

    50% {
      transform: scale(1.5);
      opacity: 0.3;
    }

    75% {
      transform: scale(1.75);
      opacity: 0.5;
    }

    100% {
      transform: scale(2);
      opacity: 0;
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    25% {
      transform: rotate(90deg);
    }

    50% {
      transform: rotate(180deg);
    }

    75% {
      transform: rotate(270deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes enterActive {
    from {
      opacity: 0;
      transform: translate3d(-100%, -100%, 0) rotate(0deg);
    }

    to {
      opacity: 1;
      transform: translate3d(0, 0, 0) rotate(360deg);
    }
  }

  @keyframes width_decreases {
    0% {
      width: 100%;
    }

    100% {
      width: 0;
    }
  }
}
